<html>
  <head>
    <style>
      * {
          color:#7F7F7F;
          font-family:Arial,sans-serif;
          font-size:12px;
          font-weight:normal;
      }    
      #config{
          overflow: auto;
          margin-bottom: 10px;
      }
      .config{
          float: left;
          width: 200px;
          height: 250px;
          border: 1px solid #000;
          margin-left: 10px;
      }
      .config .title{
          font-weight: bold;
          text-align: center;
      }
      #submit{
          clear: both;
      }
      #barcodeTarget,
      #canvasTarget{
        margin-top: 20px;
      }        
    </style>
    
    <script src="prototype.js" type="text/javascript"></script>
    <script src="../prototype-barcode.js" type="text/javascript"></script>
    <script type="text/javascript">
    
      function generateBarcode(){
        $("barcodeTarget").update();
        var value = $("barcodeValue").value;
        var btypeGrp = document['forms']['form']['btype'];
        for(i=0; i < btypeGrp.length; i++){
          if (btypeGrp[i].checked == true) {
            var btype = btypeGrp[i].value;
          }
        }
        var rendererGrp = document['forms']['form']['renderer'];
        for(i=0; i < rendererGrp.length; i++){
          if (rendererGrp[i].checked == true) {
            var renderer = rendererGrp[i].value;
          }
        }
        
        var settings = {
          output:renderer,
          bgColor: $("bgColor").value,
          color: $("color").value,
          barWidth: $("barWidth").value,
          barHeight: $("barHeight").value,
          moduleSize: $("moduleSize").value,
          posX: $("posX").value,
          posY: $("posY").value,
          addQuietZone: false
        };
        if ($("rectangular").checked){
          value = {code:value, rect: true};
        }
        if (renderer == 'canvas'){
          clearCanvas();
          $("barcodeTarget").hide();
          $("canvasTarget").show().barcode(value, btype, settings);
        } else {
          $("canvasTarget").hide();
          $("barcodeTarget").update().show().barcode(value, btype, settings);
        }
      }
      
      function showConfig( event ){
        var element = Event.element(event);
        if (element.id ==  'datamatrix') {
            $('barcode1D').hide();
            $('barcode2D').show();
        } else {
            $('barcode1D').show();
            $('barcode2D').hide();
        }
      }
      
      function showConfigRenderer( event ){
        var element = Event.element(event);
        if (element.id ==  'canvas') {
            $('miscCanvas').show();
        } else {
            $('miscCanvas').hide();
        }
      }
      
      function clearCanvas(){
        var canvas = $('canvasTarget');
        var ctx = canvas.getContext('2d');
        ctx.lineWidth = 1;
        ctx.lineCap = 'butt';
        ctx.fillStyle = '#FFFFFF';
        ctx.strokeStyle  = '#000000';
        ctx.clearRect (0, 0, canvas.width, canvas.height);
        ctx.strokeRect (0, 0, canvas.width, canvas.height);
      }
      
    Event.observe(window, 'load', function() {
        var btypeGrp = document['forms']['form']['btype'];
        for(i=0; i < btypeGrp.length; i++){
         $(btypeGrp[i].id).observe('click', showConfig);
        }
        var btypeRdr = document['forms']['form']['renderer'];
        for(i=0; i < btypeRdr.length; i++){
         $(btypeRdr[i].id).observe('click', showConfigRenderer);
        }
        $('ean8').click();
        $('css').click();
    });


      $(function(){
        $('input[name=btype]').click(function(){
          if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
        });
        $('input[name=renderer]').click(function(){
          if ($(this).attr('id') == 'canvas') $('miscCanvas').show(); else $('miscCanvas').hide();
        });
        generateBarcode();
      });
  
    </script>
  </head>
  <body>
    <div id="generator">
      <form id="form">
        Please fill in the code : <input type="text" id="barcodeValue" value="12345670">
        <div id="config">
          <div class="config">
            <div class="title">Type</div>
            <input type="radio" name="btype" id="ean8" value="ean8" checked="checked"><label for="ean8">EAN 8</label><br />
            <input type="radio" name="btype" id="ean13" value="ean13"><label for="ean13">EAN 13</label><br />
			<input type="radio" name="btype" id="upc" value="upc"><label for="upc">UPC</label><br />
            <input type="radio" name="btype" id="std25" value="std25"><label for="std25">standard 2 of 5 (industrial)</label><br />
            <input type="radio" name="btype" id="int25" value="int25"><label for="int25">interleaved 2 of 5</label><br />
            <input type="radio" name="btype" id="code11" value="code11"><label for="code11">code 11</label><br />
            <input type="radio" name="btype" id="code39" value="code39"><label for="code39">code 39</label><br />
            <input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
            <input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
            <input type="radio" name="btype" id="codabar" value="codabar"><label for="codabar">codabar</label><br />
            <input type="radio" name="btype" id="msi" value="msi"><label for="msi">MSI</label><br />
            <input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
          </div>
              
          <div class="config">
            <div class="title">Misc</div>
              Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
              "1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
            <div id="barcode1D">
              bar width: <input type="text" id="barWidth" value="1" size="3"><br />
              bar height: <input type="text" id="barHeight" value="50" size="3"><br />
            </div>
            <div id="barcode2D">
              Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
              Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
            </div>
            <div id="miscCanvas">
              x : <input type="text" id="posX" value="10" size="3"><br />
              y : <input type="text" id="posY" value="20" size="3"><br />
            </div>
          </div>
              
          <div class="config">
            <div class="title">Format</div>
            <input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
            <input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
            <input type="radio" id="svg" name="renderer" value="svg"><label for="svg">SVG (not usable in IE)</label><br />
            <input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
          </div>
        </div>
          
        <div id="submit">
          <input type="button" onclick="generateBarcode();" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Generate the barcode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">
        </div>
      </form> 
    </div>
    
    <div id="barcodeTarget" class="barcodeTarget"></div>
    <canvas id="canvasTarget" width="150" height="150"></canvas> 
  
  </body>
</html>